<template>
    <div style="display: flex;height: 75dvh;justify-content: space-between;width: 100%;">
        <div class="show-scrollbar" style="overflow: auto;">
            <template v-if="tableData.type == 'simple'">
                <SimpleTable @focus="(ele) => { focusItem = ele }">

                </SimpleTable>
            </template>
        </div>
        <div class="show-scrollbar" style="width: 750px;overflow: auto;flex-shrink: 0;">
            <template v-if="focusItem == undefined"></template>
            <template v-else-if="focusItem.type == 'card'">
                <FullCard :id="focusItem.id" :card="focusItem.card" col cover></FullCard>
            </template>
        </div>
    </div>
    <div class="footer">
        <!-- <LogTabs  class="foot-tabs">
        </LogTabs> -->
        <RoomTabs class="foot-tabs">
        </RoomTabs>
        <ConnectionTabs class="foot-tabs">
        </ConnectionTabs>
    </div>

</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useRoom } from '@/stores/room';
import FullCard from '@/components/card/FullCard.vue';
import { type element } from '@/ts/element';
import { useTable } from '@/stores/table';
import SimpleTable from '@/views/gameTable/components/table/SimpleTable.vue';
import RoomTabs from './components/tabs/RoomTabs.vue';
import ConnectionTabs from './components/tabs/ConnectionTabs.vue';
import LogTabs from './components/tabs/LogTabs.vue';
//stores
const room = useRoom()
const table = useTable()

//table
const focusItem = ref<element | undefined>(undefined)
const tableData = computed(() => {
    return table.getTable(room.usingRoom.roomId)
})



//for test
</script>
<style scoped>

.show-scrollbar {
    scrollbar-width: auto;
}
.footer {
    display: flex;
    width: 100%;
    height: 25dvh;
}
.foot-tabs{
    flex: 1;
    padding-right: 3px;
}

.foot-tabs:last-child {
    padding-right: 0px;
}
</style>